<template>
  <ContentWrap :bodyStyle="{ paddingTop: '5px' }" class="file-analysis-task">
    <back :backOption="backOption" />
    <div class="file-asyncsis-result-wrap h-full">
      <el-card shadow="hover" class="mt-16px">
        <template #header>
          <span>{{ infoOptions.data.taskName || '--' }}</span>
        </template>
        <ns-descriptions v-bind="infoOptions" />
      </el-card>

      <el-card shadow="hover" class="mt-16px p-16px">
        <el-form :model="formOption" ref="secondformEl" label-width="90px">
          <el-row>
            <el-col :span="8">
              <el-form-item label="文件名称" prop="fileName">
                <ns-input
                  v-model="formOption.fileName"
                  placeholder="请输入查询的文件名称"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="文件类型" prop="fileType">
                <ns-input
                  v-model="formOption.fileType"
                  placeholder="请输入查询的文件类型"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="归属机构" prop="deptId">
                <el-cascader
                  ref="deptCascader"
                  v-model="formOption.deptId"
                  placeholder="请选择查询的归属机构"
                  :props="cascaderOption.cascaderProps"
                  :options="deptList"
                  filterable
                  clearable
                  :filter-method="sysFilterMethod"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="归属系统" prop="sysId">
                <el-cascader
                  ref="systemCascader"
                  v-model="formOption.sysId"
                  placeholder="请选择查询的归属系统"
                  :props="cascaderOption.systemCascaderProps"
                  :options="systemList"
                  filterable
                  clearable
                  :filter-method="sysFilterMethod"
                />
              </el-form-item>
            </el-col>
            <el-col :span="16" class="text-right">
              <el-button type="primary" @click="handleSearch">搜索</el-button>
              <el-button @click="handleReset"> 重置 </el-button>
            </el-col>
          </el-row>
        </el-form>
        <AsyncTable v-bind="tableOption" ref="table" @selection-change="handleSelectionChange" />
      </el-card>
    </div>
  </ContentWrap>
</template>
<script setup lang="tsx">
import { sysFilterMethod } from '@/utils/selectFilter'
import back from '@/components/Back/index.vue'
import { useRoute } from 'vue-router'
import { DescriptionsProps } from '@/types/descriptions'
import * as api from '@/api/asset/taskManage'
import { getSimpleDeptList, DeptVO } from '@/api/system/dept'
import { handleTree } from '@/utils/tree'
import { renderFinger } from '@/utils/commonRender'
import { getOverview, getFileresultList, fileresultList } from '@/api/asset/taskManage/fileAnalysis'

const route = useRoute()
const editId = ref(route.query.id)
const backOption = reactive({
  title: '文件分析结果'
})
const cascaderOption = reactive({
  cascaderProps: {
    checkStrictly: true,
    label: 'name',
    value: 'id',
    children: 'children',
    emitPath: false
  },
  systemCascaderProps: {
    checkStrictly: true,
    label: 'value',
    value: 'id',
    children: 'children',
    emitPath: false
  }
})
const infoOptions: DescriptionsProps = reactive({
  column: 3,
  labelSuffix: '：',
  labelWidth: '140px',
  columns: [
    { label: '扫描策略模板', key: 'scanTemplateName' },
    { label: '启动时间', key: 'startTime' },
    { label: '完成时间', key: 'finishTime' },
    { label: '执行人', key: 'executorName' },
    { label: '扫描文件数', key: 'fileScanNum' },
    { label: '扫描失败数', key: 'failScanNum' }
  ],
  data: {}
})
//搜索参数
const formOption = ref<fileresultList>({
  fileName: '',
  fileType: '',
  deptId: '',
  sysId: '',
  storageStatus: ''
})
//部门下拉
let deptList = ref<DeptVO[]>([])
let systemList = ref([])
const disabledAddRows = ref(true)
const taskData = reactive({
  ids: []
})
// 表格数据
const table = ref()
const secondformEl = ref()

const tableOption = reactive({
  // 表格列
  columns: [
    {
      type: 'selection',
      width: '40px'
    },
    { label: '文件名称', prop: 'fileName' },
    {
      label: '文件类型',
      render: ({ row, $index }) => {
        const arr = row.fileName.split('.')
        return <span>{arr[arr.length - 1]}</span>
      }
    },
    {
      label: '文件大小',
      render: ({ row }) => {
        return <span>{row.fileSize + ' B'}</span>
      }
    },
    { label: '文件指纹', render: renderFinger },
    { label: '归属机构', prop: 'department' },
    { label: '归属系统', prop: 'system' },
    {
      label: '扫描状态',
      render: ({ row }) => <span>{row.scanStatus ? '扫描完成' : '扫描失败'}</span>
    }
  ],
  fetchData: async ({ page, pageSize }) => {
    return await getFileresultList({ page, pageSize, ...formOption.value, taskId: editId.value })
  }
})

// 搜索函数
const handleSearch = () => {
  table.value.currentPageReload()
}
//重置函数
const handleReset = () => {
  secondformEl.value.resetFields()
  table.value.resetPage()
  table.value.fetchData()
}

function handleSelectionChange(rows) {
  disabledAddRows.value = !rows.length
  taskData.ids = rows.map((item) => item.id)
}

async function getDeptList() {
  const data = await getSimpleDeptList()
  deptList.value = data
}
async function getSystemList() {
  const data = await api.getSimpleSystemList()
  systemList.value = handleTree(data, 'id', 'pid')
}
onMounted(async () => {
  getDeptList()
  getSystemList()
  let data = await getOverview({ taskId: editId.value })
  infoOptions.data = data
})
</script>

<style lang="scss">
.file-analysis-task {
  .file-asyncsis-result-wrap {
    .el-card__header {
      padding: 10px 16px;
    }
    .el-card__body {
      padding: 20px 0px;
    }
    .el-descriptions__table {
      width: 100%;
    }
    .el-descriptions__label {
      color: #606266;
    }
    .el-descriptions__content {
      font-size: 14px;
      vertical-align: top;
      color: #606266;
    }
  }
  .el-cascader {
    width: 100%;
  }
  .el-form .el-select {
    width: 100%;
  }
  :deep(.hide-expand .cell) {
    display: none;
  }
  :deep(.el-form .el-cascader) {
    width: 100%;
  }
  :deep(.operate-btn .el-button.is-text) {
    padding: 0 10px 0 0;
  }
}
</style>
